<template>
  <div>
    <el-form ref="form" label-position="right" :rules="rules" :model="currentRow" label-suffix="："
             label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="管养单位" prop="deptTreeId">
            <organization v-model="currentRow.deptTreeId" :disabled="isEdit" placeholder="选择管养单位"
                          @change="changeDept"></organization>
          </el-form-item>

          <el-form-item label="边坡所在道路类型" label-width="160px" prop="slopeSlideType">
            <el-radio-group v-model="currentRow.slopeSlideType" @change="changeSlopeSlide">
              <el-radio-button v-for="item in EnumSlopeSlideTypeList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路线" prop="roadId">
            <el-select v-model="currentRow.roadId" :disabled="isEdit" filterable clearable placeholder="选择路线">
              <el-option
                v-for="item in deptRoadList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="识别名称" v-if="currentRow.slopeSlideType === 2" label-width="140px" prop="attachedName">
            <el-input v-model.trim="currentRow.attachedName" placeholder="用于识别匝道位置和生成边坡名称">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--匝道需要选择-->
      <el-form-item label="所属行政区" v-if="currentRow.slopeSlideType === 2">
        <region-unit v-model="currentRow.region" placeholder="选择行政区"></region-unit>
      </el-form-item>
      <el-row class="base-end">
        <el-col :span="12">
          <el-row>
            <el-col :span="16">
              <el-form-item label="起点经纬度" prop="startLongitude">
                <el-input v-model.trim="currentRow.startLongitude" type="number" placeholder="输入经度" :maxlength="10" >
                  <template slot="prepend"><span style="font-size: 15px">E:</span></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px" prop="startLatitude">
                <el-input v-model.trim="currentRow.startLatitude" type="number" placeholder="输入纬度" :maxlength="10">
                  <template slot="prepend"><span style="font-size: 15px">N:</span></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="起点桩号" prop="startPointBig">
                <el-input v-model.trim="currentRow.startPointBig" type="number" placeholder="输入数字"
                          @change="changeStoke">
                  <el-select slot="prepend" v-model="currentRow.stokeType">
                    <el-option
                      v-for="item in EnumStationTypeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px" prop="startPointSmall">
                <el-input v-model.trim="currentRow.startPointSmall" type="number" :maxlength="3"
                          placeholder="输入数字" @change="changeStoke">
                  <template slot="prepend"><span style="font-size: 15px">KM+</span></template>
                  <template slot="append"><span style="font-size: 15px">M</span></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="16">
              <el-form-item label="止点经纬度" prop="endLongitude">
                <el-input v-model.trim="currentRow.endLongitude" type="number" placeholder="输入经度" :maxlength="10">
                  <template slot="prepend"><span style="font-size: 15px">E:</span></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px" prop="endLatitude">
                <el-input v-model.trim="currentRow.endLatitude" type="number" placeholder="输入纬度" :maxlength="10">
                  <template slot="prepend"><span style="font-size: 15px">N:</span></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="止点桩号" prop="endPointBig">
                <el-input v-model.trim="currentRow.endPointBig" type="number" placeholder="输入数字" @change="changeStoke">
                  <template slot="prepend">{{stokeTypeName}}</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px" prop="endPointSmall">
                <el-input v-model.trim="currentRow.endPointSmall" type="number" :maxlength="3"
                          placeholder="输入数字" @change="changeStoke">
                  <template slot="prepend"><span style="font-size: 15px">KM+</span></template>
                  <template slot="append"><span style="font-size: 15px">M</span></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label-width="170px" label="边坡与线路位置关系" prop="position">
            <el-select v-model="currentRow.position" clearable placeholder="边坡位置" @change="getPositionName">
              <el-option
                v-for="item in EnumWorkPointPositionList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="边坡长度" prop="slopeLength">
            <el-input v-model.trim="currentRow.slopeLength" disabled placeholder="自动计算">
              <template slot="append">m</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="边坡高度" prop="height">
            <el-input v-model.trim="currentRow.height" type="number" placeholder="请填入数字">
              <template slot="append">m</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="build_button_view">
        <el-col :span="12">
          <el-form-item label="边坡名称" prop="name">
            <el-input v-model="currentRow.name" disabled placeholder="自动生成">
              <el-button slot="append" icon="el-icon-thumb" @click="buildSlopeName()">生成名称</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="边坡编号" prop="slopeNo">
            <el-input v-model="currentRow.slopeNo" disabled placeholder="自动生成">
              <el-button slot="append" icon="el-icon-thumb" @click="buildSlopeNo()">
                生成编号
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="currentRow.slopeSlideType === 2">
        <el-row>
          <el-col :span="8">
            <el-form-item label="建造年度" prop="buildTime">
              <el-date-picker
                v-model="currentRow.buildTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="车道数量" prop="roadCount">
              <el-input v-model.trim="currentRow.roadCount" type="number" placeholder="请输入数字">
                <template slot="append">个</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="改建年度" prop="changeTime">
              <el-date-picker
                v-model="currentRow.changeTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="路基宽度" prop="luJiWidth">
              <el-input v-model.trim="currentRow.luJiWidth" type="number" placeholder="请输入数字">
                <template slot="append">m</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加固年度" prop="reinforceTime">
              <el-date-picker
                v-model="currentRow.reinforceTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="路面宽度" prop="luMianWidth">
              <el-input v-model.trim="currentRow.luMianWidth" type="number" placeholder="请输入数字">
                <template slot="append">m</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="技术等级" prop="roadGrade">
          <el-radio-group v-model="currentRow.roadGrade">
            <el-radio-button v-for="item in EnumRoadGradeList" :key="item.code" :label="item.code">{{item.name}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="面层类型" prop="mianCengType">
          <el-radio-group v-model="currentRow.mianCengType">
            <el-radio-button v-for="item in EnumMianCengTypeList" :key="item.code" :label="item.code">{{item.name}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
      </div>
      <!--    区间信息-->
      <div class="qujian_view" v-if="roadSectionInfo.roadGradeName && currentRow.slopeSlideType === 1">
        <span class="label_view">路线编号:</span>{{roadSectionInfo.roadCode}}
        <el-divider direction="vertical"></el-divider>
        <span class="label_view">技术等级:</span>{{roadSectionInfo.roadGradeName}}
        <el-divider direction="vertical"></el-divider>
        <span class="label_view">路线类型:</span>{{roadSectionInfo.roadTypeName}}
        <el-divider direction="vertical" v-if="roadSectionInfo.roadCount"></el-divider>
        <span class="label_view" v-if="roadSectionInfo.roadCount">车道数量:</span>{{roadSectionInfo.roadCount}}
        <el-divider direction="vertical" v-if="roadSectionInfo.luJiWidth"></el-divider>
        <span v-if="roadSectionInfo.luJiWidth"><span
          class="label_view">路基宽度:</span>{{roadSectionInfo.luJiWidth}}m</span>
        <el-divider direction="vertical" v-if="roadSectionInfo.luMianWidth"></el-divider>
        <span v-if="roadSectionInfo.luMianWidth"> <span class="label_view">路面宽度:</span>{{roadSectionInfo.luMianWidth}}m</span>
        <el-divider direction="vertical" v-if="roadSectionInfo.mianCengTypeName"></el-divider>
        <span class="label_view" v-if="roadSectionInfo.mianCengTypeName">面层类型:</span>{{roadSectionInfo.mianCengTypeName}}
        <el-divider direction="vertical" v-if="roadSectionInfo.buildTime"></el-divider>
        <span class="label_view" v-if="roadSectionInfo.buildTime">建造年度:</span>{{roadSectionInfo.buildTime |
        formatTimer}}
        <el-divider direction="vertical" v-if="roadSectionInfo.changeTime"></el-divider>
        <span class="label_view" v-if="roadSectionInfo.changeTime">改建年度:</span>{{roadSectionInfo.changeTime |
        formatTimer}}
      </div>
    </el-form>
  </div>
</template>
<script>

import ItemMixins from "./item.mixins";
import Organization from '@/components/organization-unit/all'
import RegionUnit from '@/components/region-unit2'
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isEdit'],
  mixins: [ItemMixins,Enums],
  components: {Organization, RegionUnit},
  data() {
    return {
      rules: {
        slopeSlideType: {required: true, message: '请选择边坡所在道路类型'},
        name: {required: true, message: '请点击生成边坡名称'},
        slopeNo: {required: true, message: '请点击生成边坡编号'},
        position: {required: true, message: '请选择边坡与道路位置关系'},
        startLongitude: {required: true, message: '请输入经纬度'},
        endLongitude: {required: true, message: '请输入经纬度'},
        startLatitude: {required: true, message: '请输入经纬度'},
        endLatitude: {required: true, message: '请输入经纬度'},
        roadId: {required: true, message: '请选择路线'},
        deptTreeId: {required: true, message: '请选择管养单位'},
        height: {required: true, message: '请填入边坡高度'},
        startPointBig: {required: true, message: '请输入起点桩号'},
        endPointBig: {required: true, message: '请输入止点桩号'},
      },
      EnumWorkPointPositionList: [],
      EnumSlopeSlideTypeList: [],
      EnumMainStationTypeList: [],
      EnumRampStationTypeList: [],
      sectionList: [],
      roadList2: [],
      deptRoadList: [],
      EnumRoadGradeList: [],
      EnumMianCengTypeList: [],
      positionName:''
    }
  },
  computed: {
    stokeTypeName() {
      let name = 'K'
      this.EnumStationTypeList.map(x => {
        if (x.code === this.currentRow.stokeType) {
          name = x.name
        }
      })
      return name
    },
    EnumStationTypeList() {
      //根据所选主线或匝道，返回不同的桩号类型选择列表
      return this.currentRow.slopeSlideType === 1 ? this.EnumMainStationTypeList : this.EnumRampStationTypeList
    },
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    getPositionName(val,type){
      if(type!=='edit'){
        this.currentRow.name=''
      }
      this.EnumWorkPointPositionList.map(x=>{
        if(x.code==val){
          this.positionName=x.name
        }
      })
    },
    //选择边坡所在道路类型
    changeSlopeSlide() {
      this.currentRow.stokeType = this.EnumStationTypeList[0].code
      this.$set(this.currentRow, "buildTime", "");
      this.$set(this.currentRow, "changeTime", "");
      this.$set(this.currentRow, "roadGrade", "");
      this.$set(this.currentRow, "roadCount", "");
      this.$set(this.currentRow, "luJiWidth", "");
      this.$set(this.currentRow, "luMianWidth", "");
      this.$set(this.currentRow, "slopeNo", "");
      this.$set(this.currentRow, "name", "");
      this.$set(this.currentRow, "attachedName", "");
    },
    //修改起止桩号
    changeStoke() {
      this.$set(this.currentRow, "name", "");
      this.$set(this.currentRow, "name", "");
      this.$set(this.currentRow, "slopeNo", "");
    },
    //获取路线列表
    async changeDept(val) {
      this.deptRoadList = await this.getRoadListByDept(this.currentRow.deptTreeId)
      if (!val) {
        this.$set(this.currentRow, "name", "");
        this.$set(this.currentRow, "slopeNo", "");
        if (this.deptRoadList.length > 0) {
          this.$set(this.currentRow, "roadId", this.deptRoadList[0].id);
        } else {
          this.$set(this.currentRow, "roadId", "");
        }
      }
    },
    //生成边坡名称
    buildSlopeName() {
      if(this.currentRow.endPointBig!==0 || this.currentRow.endPointBig!==0){
        if (!this.currentRow.startPointBig || !this.currentRow.endPointBig) {
          this.$message({
            message: '提示！请先填入起止桩号',
            type: 'warning'
          });
          return
        }

      }
      if (!this.currentRow.position) {
        this.$message({
          message: '提示！请先选择位置关系',
          type: 'warning'
        });
        return
      }
      this. getPositionName(this.currentRow.position)
      //生成边坡名称
      let name = this.stokeTypeName + this.currentRow.startPointBig
      if (this.currentRow.startPointSmall) {
        name = name + "+" + this.currentRow.startPointSmall
      }
      name = name + "~" + this.stokeTypeName + this.currentRow.endPointBig
      if (this.currentRow.endPointSmall) {
        name = name + "+" + this.currentRow.endPointSmall
      }
      if (this.currentRow.attachedName) {
        this.currentRow.name = this.currentRow.attachedName + name + "段"+this.positionName+"边坡"
      } else {
        this.currentRow.name = name + "段"+this.positionName+"边坡"
      }

      //计算边坡长度
      let start = Number(this.currentRow.startPointBig * 1000) + Number(this.currentRow.startPointSmall ? this.currentRow.startPointSmall : 0)
      let end = Number(this.currentRow.endPointBig * 1000) + Number(this.currentRow.endPointSmall ? this.currentRow.endPointSmall : 0)
      if (start > end) {
        this.currentRow.endPointBig = ''
        this.$message({
          message: '提示！止点桩号不应比起点桩号小',
          type: 'warning'
        });
        return
      }
      this.currentRow.slopeLength = end - start
      this.clearValidate()
      this.$forceUpdate()// 强制刷新
    },
    //生成边坡编号
    async buildSlopeNo() {
      if (!this.currentRow.deptTreeId) {
        this.$message({
          message: '提示！请选择管养中心',
          type: 'warning'
        });
        return
      }
      if (!this.currentRow.roadId || !this.currentRow.position) {
        this.$message({
          message: '提示！请选择路线和边坡位置',
          type: 'warning'
        });
        return
      }
      if (!this.currentRow.startPointBig || !this.currentRow.endPointBig) {
        this.$message({
          message: '提示！请输入起止桩号',
          type: 'warning'
        });
        return
      }
      if (this.currentRow.slopeSlideType === 2 && !this.currentRow.region) {
        this.$message({
          message: '提示！请先选择行政区',
          type: 'warning'
        });
        return
      }
      this.currentRow.slopeNo = await this.getNo(0);
      if (this.currentRow.slopeSlideType === 1) {
        this.getRoadSectionInfo2();
      }
      this.clearValidate()
      this.$forceUpdate()// 强制刷新
    },
    //选择路线，获取第一个区间详情
    async getRoadSectionInfo2() {
      let form = {
        roadId: this.currentRow.roadId,
        type: 0,
        deptTreeId: this.currentRow.deptTreeId,
        roadSectionId: this.currentRow.roadSectionId,
        position: this.currentRow.position,
        startPointBig: this.currentRow.startPointBig,
        endPointBig: this.currentRow.endPointBig,
        startPointSmall: this.currentRow.startPointSmall,
        endPointSmall: this.currentRow.endPointSmall,
      }
      this.roadSectionInfo = {}
      if (this.currentRow.slopeSlideType === 1) {
        await this.getRoadSectionInfo(form)
        this.currentRow.region = this.roadSectionInfo.region
        this.currentRow.kangZhenLevel = this.currentRow.kangZhenLevel ? this.currentRow.kangZhenLevel : this.roadSectionInfo.kangZhenLevel
        this.currentRow.fangHongBiaoZhun = this.currentRow.fangHongBiaoZhun ? this.currentRow.fangHongBiaoZhun : this.roadSectionInfo.fangHongBiaoZhun
      }
    },
    // 关闭弹窗之前清楚表单校验提示
    clearValidate() {
      this.$refs.form.clearValidate()
    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumWorkPointPosition', 'EnumSlopeSlideType', 'EnumMainStationType', 'EnumRampStationType', 'EnumRoadGrade', 'EnumMianCengType'],
      ['EnumWorkPointPositionList', 'EnumSlopeSlideTypeList', 'EnumMainStationTypeList', 'EnumRampStationTypeList', 'EnumRoadGradeList', 'EnumMianCengTypeList'])
  },
  created() {
  },
  activated() {
  }
}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }

  .build_button_view .el-button--default {
    background-color: #1990FE !important;
    color: white !important;
  }

  .base-end {
    .el-input__inner {
      /*height: 30px;*/
    }

    .el-input-group__prepend .el-select {
      width: 74px;
    }

    .el-input-group__append, .el-input-group__prepend {
      padding: 0px 10px;
    }

    .el-input-group__prepend .el-select {
      margin: 0px;
    }

  }

  .qujian_view {
    margin: 10px;
    padding: 10px;
    text-align: center;

    .label_view {
      color: #1990FE;
      margin-bottom: 10px;
      display: inline-block;
      margin-right: 10px;
    }

    .el-divider {
      background-color: #2196f3;
      width: 2px;
    }
  }
</style>
